<script setup lang="ts">
import {useRoute} from 'vue-router'
import {ref, onMounted, watchEffect} from 'vue'
import banner from '@/commpents/banner/index.vue'
import {ArrowRight} from '@element-plus/icons-vue'
import {getBannerListApi} from '@/api/home/banner/index'
import {getNavHeadApi} from '@/api/home/homeHead/head'
import headerDetails from '@/commpents/headDetails/index.vue'
//公共

// 获取路由参数
const route = useRoute()


// 获取路由元信息
function getRouteMeta() {
  return route.matched.filter(function (item) {
    return item.meta.title
  })
}


// 轮播图数据
let bannerList = ref([])

//获取轮播图数据
async function getBannerData() {
  let result = await getBannerListApi()
  if (result.msg === '操作成功') {
    bannerList.value = result.result
  }
}


//获取全部分类数据
let typeList: any = ref([])

async function getNavHeadData() {
  let result = await getNavHeadApi()
  if (result.msg === '操作成功') {
    typeList.value = result.result
    typeList.value = typeList.value[route.query.index]
  }
}

watchEffect(()=>{
  if(route.query.index){
    getNavHeadData()
  }
})
onMounted(() => {
  getBannerData()
  getNavHeadData()
})
</script>

<template>
  <div class="details">
    <!-- 轮播图-->
    <div class="banner">
      <div class="banner-heart">
        <banner>
          <template #title>
            <div class="title">
              <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item v-for="item in getRouteMeta()">{{ item.meta.title }}</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
          </template>
          <template #content>
            <el-carousel height="41.6rem" motion-blur trigger="click">
              <el-carousel-item v-for="item in bannerList" :key="item.id">
                <div class="banner-img">
                  <img v-lazy-img="item.imgUrl">
                </div>
              </el-carousel-item>
            </el-carousel>
          </template>
        </banner>
      </div>
    </div>
    <!-- 全部分类-->
    <div class="all-category">
      <div class="category-heart">
        <div class="category-title">
          <h2>全部分类</h2>
        </div>
        <div class="category-list">
          <div class="category-item" v-for="item in typeList.children" :key="item.id">
            <div class="category-img">
              <img v-lazy-img="item.picture">
            </div>
            <div class="category-name">
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--   分类模块区域  -->
    <headerDetails></headerDetails>
  </div>
</template>

<style scoped>
.details {
  width: 100%;
  background-color: #f5f5f5;

}

.title {
  margin-bottom: 2.5rem;
}

.banner {
  width: 100%;
  padding: 2.5rem 0 1.66rem 0;
}

.banner-heart {
  width: var(--primary-heart-width);
  margin: 0 auto;
}

.banner-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.all-category {
  width: 100%;
  padding-bottom: 1.66rem;
  box-sizing: border-box;
}

.category-heart {
  width: var(--primary-heart-width);
  margin: 0 auto;
  padding: 4.16rem 1.66rem 2.5rem;
  background-color: #fff;
  box-sizing: border-box;
}

.category-list {
  display: flex;
}

.category-item {
  text-align: center;
}



.category-img img {
  width: 20.83rem;
  height: 20.83rem;
  object-fit: cover;
}

.category-title {
  margin-bottom: 2.5rem;
}

.category-title h2 {
  font-size: 2.3rem;
  color: #666;
  text-align: center;
  font-weight: 400;
}

.category-name span {
  font-size: 1.33rem;
  color: #333;
}
</style>